<template>
  <breadCrumb ref="breadcrumbRef" :item="item"></breadCrumb>
  <!-- 外壳 -->
  <div class="overview-wrapped">
    <!-- 顶部内容外壳 -->
    <div class="top-content-wrapped">
      <!-- 个人信息 -->
      <div class="person-info">
        <!-- 用户头像外壳 -->
        <div class="person-avatar-wrapped">
          <el-avatar :size="100" :src="userInfo.avatar" />
          <span class="department">所属部门：{{ userInfo.department ? userInfo.department : '未设置' }}</span>
          <div class="company">所属公司：{{ companyName ? companyName : '未设置' }}</div>
        </div>
        <!-- 竖线 -->
        <div class="line-wrapped">
          <div class="line"></div>
        </div>
        <!-- 详细信息外壳 -->
        <div class="detail-info-wrapped">
          <p>姓名: {{ userStore.name }}</p>
          <p>性别：{{ userStore.sex }}</p>
          <p>身份：{{ userStore.identity }}</p>
          <p>分管领域：超级管理</p>
          <p>权限：最高权限</p>
        </div>
      </div>
      <!-- 管理与用户对比图 -->
      <div class="manage-user pie"></div>
    </div>
    <!-- 中间内容外壳 -->
    <div class="mid-content-wrapped">
      <!-- 产品分类条形图 -->
      <div class="product-category-bar mid-content-left"></div>
      <div class="mid-content-right">
        <div class="title">常用管理</div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="button-area">
              <SvgIcon icon-name="user" style="width: 24px;height: 24px;"></SvgIcon>
              <span class="button-name">用户管理</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area">
              <SvgIcon icon-name="product" style="width: 24px;height: 24px;"></SvgIcon>
              <span class="button-name">产品管理</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area">
              <SvgIcon icon-name="notice" style="width: 24px;height: 24px;"></SvgIcon>
              <span class="button-name">系统消息</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area">
                <SvgIcon icon-name="me" style="width: 24px;height: 24px;"></SvgIcon>
                <span class="button-name">个人信息</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area">
              <SvgIcon icon-name="message" style="width: 24px;height: 24px;"></SvgIcon>
              <span class="button-name">部门信息</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="button-area">
              <SvgIcon icon-name="set" style="width: 24px;height: 24px;"></SvgIcon>
              <span class="button-name">系统设置</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 底部内容外壳 -->
    <div class="footer-content-wrapped">
      <!-- 公告等级饼状分布图 -->
      <div class="massage-level footer-content-left"></div>
      <!-- 每日登录人数图 -->
      <div class="login-week footer-content-right"></div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import breadCrumb from "../../components/breadCrumb.vue"
import SvgIcon from '../../components/SvgIcon.vue'
import * as echarts from 'echarts'
import { useUserInfo } from '../../store/userinfo'
import { getCompanyNameAPI } from "../../api/setting"
import { getIdentityCountAPI, getCateroryAndTotalAPI, getLevelCountAPI, getLoginCountonWeekAPI } from "../../api/overview"

const userStore = useUserInfo()

const userInfo = reactive({
  avatar: userStore.imageUrl,
  department: userStore.department,
})


const companyName = ref('')
const getCompanyName = async () => {
  const res = await getCompanyNameAPI()
  companyName.value = res.data.data
}

const breadcrumbRef = ref()
const item = ref({
  first: '系统概览'
})

// 调用echarts图
onMounted(() => {
  getCompanyName()
  manageUser()
  productCategoryBar()
  massageLevel()
  massageAllDay()
})

// 管理员与用户比值图
const manageUser = async () => {
  // 通过类名 初始化
  const mu = echarts.init(document.querySelector('.manage-user') as HTMLElement);
  mu.showLoading()
  const res = await getIdentityCountAPI()
  let data = res.data.data

  mu.hideLoading();
  (document.querySelector('.manage-user') as HTMLElement).setAttribute('_echarts_instance_', '')
  // 设置基本的参数
  mu.setOption({
    title: {
      text: '管理与用户对比图',
      // subtext: 'Fake Data',
      left: 'center',
      top: "5%",
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      padding: [25, 20, 25, 20]
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: '50%',
        top: "15%",
        data: data,
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
  // 用于echarts响应式
  window.addEventListener('resize', function () {
    mu.resize()
  })
}

// 产品类别图
const productCategoryBar = async () => {
  const pcb = echarts.init(document.querySelector('.product-category-bar') as HTMLElement);
  pcb.showLoading()
  const res = await getCateroryAndTotalAPI()
  let data = res.data.data

  pcb.hideLoading();
  (document.querySelector('.product-category-bar') as HTMLElement).setAttribute('_echarts_instance_', '')
  pcb.setOption({
    title: {
      text: "产品类别库存总价图",
      top: "3%",
      textStyle: {
        fontSize: 16
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      // 食品类，服装类，鞋帽类，日用品类，家具类，家用电器类，纺织品类，五金类
      data: data.category
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.price,
        type: 'bar',
        barWidth: 40,
        colorBy: "data"
      },
    ]
  })
  window.addEventListener('resize', function () {
    pcb.resize()
  })
}

// 公告等级分布图
const massageLevel = async () => {
  const mlElement = document.querySelector('.massage-level');

  if (mlElement instanceof HTMLElement) {
    const ml = echarts.init(mlElement);
    ml.showLoading()
    const res = await getLevelCountAPI()
    let data = res.data.data
    ml.hideLoading();
    mlElement.setAttribute('_echarts_instance_', '');
    ml.setOption({
      title: {
        text: "公告等级分布图",
        top: "5%",
        textStyle: {
          fontSize: 16
        },
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '10%',
        left: 'center'
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data,
          // data: [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
          //   { value: 300, name: 'Video Ads' }
          // ]
        }
      ]
    })
    window.addEventListener('resize', function () {
      ml.resize()
    })
  } else {
    console.error('Element with class "massage-level" not found.');
  }

}

// 消息每日总量图
const massageAllDay = async () => {

  const mad = echarts.init(document.querySelector('.login-week') as HTMLElement);
  mad.showLoading()
  let res = await getLoginCountonWeekAPI()
  console.log(res);

  let data = res.data.data

  mad.hideLoading();
  (document.querySelector('.login-week') as HTMLElement).setAttribute('_echarts_instance_', '')
  mad.setOption({
    title: {
      text: "每日登录人数图",
      top: "3%",
      textStyle: {
        fontSize: 16
      },
    },
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: data.day
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.count,
        type: 'line'
      }
    ]
  })
  window.addEventListener('resize', function () {
    mad.resize()
  })
}

</script>

<style lang="scss" scoped>
// 总览内容
.overview-wrapped {
  padding: 8px;
  height: calc(100vh - 101px);
  background: #f8f8f8;

  // 上部分内容 个人资料 + 饼状图
  .top-content-wrapped {
    height: 30%;
    display: flex;

    // 个人信息
    .person-info {
      height: 100%;
      margin-right: 8px;
      width: calc(50% - 8px);
      display: flex;
      background: #fff;

      // 头像区域
      .person-avatar-wrapped {
        display: flex;
        width: 50%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        // 公司
        .company {
          margin: 10px 0;
          font-size: 12px;
        }

        // 职务
        .department {
          margin-top: 8px;
          font-size: 12px;
        }

      }

      // 分割线
      .line-wrapped {
        height: 100%;
        display: flex;
        align-items: center;

        .line {
          height: 170px;
          border: 1px solid #D3D3D3;
        }
      }

      // 详细信息区域
      .detail-info-wrapped {
        height: 100%;
        width: calc(50% - 1px);
        margin-left: 50px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
      }
    }

    // 饼状图
    .pie {
      width: calc(50%);
      height: 100%;
      background: #fff;
    }
  }

  // 中间部分内容 消息阅读量图 产品类别图
  .mid-content-wrapped {
    margin-top: 8px;
    height: calc(32% - 8px);
    display: flex;

    // 中间左部分
    .mid-content-left {
      margin-right: 8px;
      width: calc(60% - 8px);
      background: #fff;
    }

    // 中间右部分
    .mid-content-right {
      width: calc(40%);
      background: #fff;
      padding: 8px;

      // 标题
      .title {
        font-size: 14px;
        margin-bottom: 8px;
      }

      // 按钮区域
      .button-area {
        margin-bottom: 8px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background: #F5F5F5;

        // 按钮名字
        .button-name {
          margin-top: 10px;
        }
      }

      // 按钮变色
      .button-area:hover {
        background: #e4efff;
      }
    }
  }

  // 底部内容
  .footer-content-wrapped {
    margin-top: 8px;
    height: calc(38% - 8px);
    display: flex;

    // 底部左部分
    .footer-content-left {
      margin-right: 8px;
      height: 100%;
      width: calc(30% - 8px);
      background: #fff;
    }

    // 底部右部分
    .footer-content-right {
      height: 100%;
      width: calc(70%);
      background: #fff;
    }
  }
}
</style>